<template>
  <div class="page-container" style="padding-bottom: 0px;">
    <div class="page-form-bg" style="overflow: auto;" :style="{height: isShowTools?'calc(100vh - 295px)':'calc(100vh - 205px)'}">
      <el-form ref="form" class="query-more-form" size="mini" label-width="85px" :model="form">
        <el-row>
          <el-col :span="16">
            <el-col :span="24">
              <div class="page-form-title">
                <span class="label">工单登记</span>
              </div>
            </el-col>
            <el-col :span="24" style="padding: 20px">
              <!-- row1 -->
              <el-row :gutter="20" class="mb-20">
                <el-col :span="6"
                  ><el-form-item label="来电号码"
                    ><el-input
                      v-model="form.reportTel"
                      placeholder="请输入来电号码"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="姓名"
                    ><el-input
                      v-model="form.creatUserName"
                      placeholder="请输入姓名"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="性别"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入姓名"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >历史工单</el-button
                  ></el-col
                >
              </el-row>
              <!-- row2 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来源类型"
                    ><el-input
                      v-model="form.categoryDcaName"
                      placeholder="请输入来源类型"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="诉求类型"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入诉求类型"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="紧急级别"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入紧急级别"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="是否保留"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入是否保留"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>
              <!-- row3 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="区/市/县"
                    ><el-input
                      v-model="form.addressCity"
                      placeholder="请输入区/市/县"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="街道/乡镇"
                    ><el-input
                      v-model="form.addressStreet"
                      placeholder="请输入街道/乡镇"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="社区/村"
                    ><el-input
                      v-model="form.addressDetailedUser"
                      placeholder="请输入社区/村"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="是否回复"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入是否回复"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>
              <!-- row4 -->
              <el-row :gutter="20" class="mb-20">
                <el-col :span="6"
                  ><el-form-item label="行业"
                    ><el-input
                      v-model="form.categoryDcaName"
                      placeholder="请输入行业"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="大类"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入大类"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="小类"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入小类"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >智能分类</el-button
                  ></el-col
                >
              </el-row>
              <!-- row5 -->
              <el-row :gutter="20">
                <el-col :span="24"
                  ><el-form-item label="位置"
                    ><el-input
                      v-model="form.addressDetailedStandard"
                      placeholder="请输入位置"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="18"
                  ><el-form-item label="工单标题"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入工单标题"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >地图定位</el-button
                  ></el-col
                >
                <el-col :span="24"
                  ><el-form-item label="诉求类容"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入小类"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <div class="page-form-title">
                <span class="label">疑似案件</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="page-form-table" style="padding: 20px">
                <el-table
                  border
                  size="small"
                  :data="tableData"
                  height="300px"
                  style="width: 100%"
                >
                  <el-table-column type="selection" width="45" />
                  <el-table-column
                    prop="key1"
                    label="状态"
                    show-overflow-tooltip
                    width="80"
                  >
                    <template slot-scope="scope">
                      <template v-if="scope.row.key1 == 1">
                        <span class="circular state-color-1"></span>
                        <span>已超期</span>
                      </template>
                      <template v-if="scope.row.key1 == 2">
                        <span class="circular state-color-2"></span>
                        <span>即将超时</span>
                      </template>
                      <template v-if="scope.row.key1 == 3">
                        <span class="circular state-color-3"></span>
                        <span>未超时</span>
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="key2"
                    label="办理环节"
                    show-overflow-tooltip
                    width="100"
                  >
                    <template slot-scope="scope">
                      <span class="rect" :class="'rect-color-' + scope.row.key2"
                        >退回待审核</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="key3"
                    label="办理街道"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="key4"
                    label="案件编号"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="key5"
                    label="上报时间"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="key6"
                    label="案件大类"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="key7"
                    label="案件小类"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column label="操作" width="90" fixed="right">
                    <template slot-scope="{ row }">
                      <el-button
                        class="table-inner-btn"
                        type="text"
                        size="mini"
                        @click="handleDetail(row)"
                        >详情</el-button
                      >
                      <el-button class="table-inner-btn" type="text" size="mini"
                        >流程</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-col>
          <el-col :span="8" style="padding: 10px 5px 10px 20px">
            <div class="map-panel mb-20">
              <div id="map" ref="map" />
            </div>
            <div class="steps-panel of-auto">
              <div class="steps-title" />
              <div class="steps-content">
                <el-steps class="custom-steps" direction="vertical" :active="1">
                  <el-step v-for="i in 3" :key="i">
                    <template slot="icon">
                      <span class="status" :class="i === 1 ? 'color-1' : ''" />
                    </template>
                    <template slot="title">
                      <div class="title">案件受理</div>
                      <div class="time fs-12">2021-03-23 18:49:41</div>
                    </template>
                    <template slot="description">
                      <div class="step-content">
                        <div>办理人：张三</div>
                        <div>办理部门：街道办公室</div>
                        <div>办理意见：受理</div>
                        <div>备注：XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="isShowBottomBtn" class="bottom-btn-panel flex-end-center">
      <div class="operation-btn red mr-10" @click="handleShowDispatch">分发</div>
      <div class="operation-btn yellow">处理</div>
      
    </div>
    <DispatchDialog
      :dialogVisible="dispatchDialogVisible"
      @closeDialog="dispatchDialogVisible = false"
    />
  </div>
</template>

<script>
  import SearchPanel from '@/components/SearchPanel'
  import Pagination from '@/components/Pagination'
  import CaseCardItem from '@/components/CaseCardItem'
  import DispatchDialog from './../casedeal/components/dispatchDialog'
  import BMap from 'BMap'
  export default {
    name: 'CaseDealDispatch',
    components:{
      SearchPanel,Pagination,
      CaseCardItem,DispatchDialog
    },
    computed: {
      isShowTools(){
        return this.$route.meta.tools
      },
    },
    data(){
      return {
        isShowBottomBtn: true,
        dispatchDialogVisible: false,
        form:{},
        tableData:[
          {key1: 1,key2: 1,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 2,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 2,key2: 3,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 3,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 2,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 2,key2: 1,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
        ],
        map: '',
        mapZoom: 14 ,
      }
    },
    mounted(){
      this.initMap()
    },
    methods: {
      handleShowDispatch(){
        this.dispatchDialogVisible = true
      },
      initMap(){
        // 创建Map实例
        this.map = new BMap.Map('map')
        // 初始化地图,设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
        // 设置地图显示的城市 此项是必须设置的
        this.map.setCurrentCity('成都')
        // 启用滚轮放大缩小，默认禁用
        this.map.enableScrollWheelZoom(true)
        // 启用地图惯性拖拽，默认禁用
        this.map.enableContinuousZoom(true)
      },
      initData(){

      },
      handleDetail(){
      },
    // 查询案件的详情信息
    getCaseMsg(caseCode) {
      caseMessage(caseCode).then((result) => {
        let { code, data } = result;
        if (code == 200) {
          this.form = data
        }
      });
    },
  },
  created() {
    if (this.$route.params.caseCode)
      this.getCaseMsg(this.$route.params.caseCode);
  },
};
</script>

<style lang="scss" scoped>
.steps-panel {
  height: 440px;
  .steps-title {
    height: 36px;
    background: url(../../assets/tools/title_bg.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .steps-content {
    height: 400px;
    padding: 10px 10px 5px 10px;
    overflow: auto;
  }
}
.map-panel {
  #map {
    height: 400px;
    border: 1px solid #eee;
  }
}
</style>